<template>
  <div class="organ-menu">
    <el-menu
      style="overflow: hidden;"
      :default-active="id"
      @select="handleSelect"
      >
      <el-menu-item index="" :class="'h40 ' + (id === ''? ' title-button-active' : '')">
        <i class="el-icon-position"></i>
        <span slot="title">全部</span>
      </el-menu-item>
      <el-menu-item v-for="item in data" :key="item.id" :index="item.id" 
        :class="'h40 ' + (id === item.id ? ' title-button-active' : '')">
        <i class="el-icon-position"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { queryOrganChildren } from '@/api/organ'

export default {
  name: '',
  components: { },
  inject: ['app'],
  props: {
    info: {
      type: Object,
      default: null
    },
    getData: {
      type: Function,
      default: function() {}
    }
  },
  watch: {
    getData: {
      type: Function,
      default: function() {}
    }
  },
  provide() {
    return {
      app: this.app
    }
  },
  data() {
    return {
      data: [],
      id: '',
      dialog: {
        edit: {},
        title: '',
        type: ''
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(e) {
      queryOrganChildren({
        parent_id: '0',
        ...e
      }).then(response => {
        this.data = response.list
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    handleSelect(e) {
      this.id = e
      this.getData(e)
    }
  }
}
</script>

<style scoped>
.title-button-active{
  background-color:#E4E7ED;
  color:#2775ff!important;
}
.organ-menu .el-submenu /deep/ .el-submenu__title {
  height: 40px;
  line-height: 40px;
}
.organ-menu .el-submenu .el-menu-item{
  height: 40px;
  line-height: 40px;
}
</style>
